﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>省市级联</title>
</head>
<style type="text/css">
    select {
        width: 100px;
        text-align: center;
        margin: 5px;
        align-content: center;
    }
</style>

<body>
    <form>
        <center>
            省份：
            <select name="province" id="province" required onchange="updateCities()">
                <option value="">--请选择--</option>
                <option value="guangdong">广东省</option>
                <!-- 在这里添加更多省份选项 -->
            </select> 城市：
            <select name="city" id="city" required>
                <option value="">--请选择--</option>
            </select>
        </center>
    </form>

    <script>
        var cityData = {
            "guangdong": ["广州市", "深圳市", "佛山市", "珠海市", "汕头市"]
                // 在这里添加更多省份和对应的城市数据
        };

        var province = document.getElementById("province");
        var city = document.getElementById("city");

        function updateCities() {
            var selectedProvince = province.value;
            city.innerHTML = '<option value="">--请选择--</option>';
            if (selectedProvince && cityData[selectedProvince]) {
                cityData[selectedProvince].forEach(function(value) {
                    var option = document.createElement("option");
                    option.text = value;
                    city.add(option);
                });
            }
        }
    </script>
</body>

</html>